iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

30天肝出購物網站系列 第 12

Day12:12 - 商品服務(3) - 後端 & 前端 - 商品詳情API

  • 分享至 

  • xImage
  •  

வணக்கம்,我是Charlie!
在Day11當中,我們完成了總商品的API以及分類,而今天我們將完成商品詳情的後端API。

================================◉‿◉=================================

首先在urls.py中新增productDetail的URL pattern:

url(r'/detail/(?P<productID>[\w]{1,55})$',views.product),

接著在views.py中,新增productID這個參數:

def product(request,categoryID = None,productID = None):

接著在product view當中新增返回詳情的程式碼,如果productID不存在的話則返回badRequest:

if request.method == "GET" and productID is not None:
	product = Product.objects.filter(id = productID)
	if not product:
		return R.badRequest("productID does not exist")
	product = product[0]
	return R.ok(product.toJson())

接著使用productID來做測試:
https://ithelp.ithome.com.tw/upload/images/20210926/20141666UAB9oPN8QB.png

接著是前端的部分,因為我們的toJson中有包含了productID,所以可以用productID去拼接URL。

首先在indexPage.vue的地方,把img用a包起來,並使用:href綁定URL:

<a :href="'/#/productDetail/' + product.id"><img :src="'http://localhost:8000' + product.img" alt="" style="width:200px;height: 200px;"></a>

https://ithelp.ithome.com.tw/upload/images/20210926/20141666PIGny21hfQ.png

接著在product.js當中,新增getDetail方法:

export function getDetail(pid){
  return axios.get(`http://${host()}:${port()}/product/detail/${pid}`)
}

接著在productDetail當中,新增item model跟created方法:

data(){
  return {
    isLogin:false,
    amount: 1,
    item: {},
  }
},
created(){
  var pid = this.$route.params.pid
  getDetail(pid).then((response) => {
    if(response.data.code == STATUS_OK){
      this.item = response.data.data
    }
    else{
      this.$fire({type:'error',text:response.data.data}).then(() => {
        window.location.href = "/#/index"
        window.location.reload
      })
    }
  })
}

然後在上面的template當中插入資料:

// img
<img :src="'http://localhost:8000' + item.img" alt="" style="width: 200px;height: 200px;">

// productName
<b-row>
	<h2>{{ item.name }}</h2>
</b-row>

// productPrice
<b-row>
	<h3>${{ item.price }}</h3>
</b-row>

// spin
<b-row>
	<b-col cols="3">
		<b-form-spinbutton v-model="amount" min="1" :max="item.stored_amount"></b-form-spinbutton>
	</b-col>
	<b-col cols="3">
		<span style="color:red;">剩餘數量: {{ item.stored_amount }}</span>
	</b-col>
</b-row>

// info
<b-row style="padding-left:250px;" v-html="item.info">
</b-row>

就可以看到商品載入了:
https://ithelp.ithome.com.tw/upload/images/20210926/20141666docuTrL4vO.png

另外還有種類商品頁的部分,一樣將img用a包覆起來:

<b-col v-for="product in products" :key="product.id">
	<a :href="'/#/productDetail/' + product.id"><img :src="'http://localhost:8000' + product.img" alt="" style="width:200px;height: 200px;"></a>
	<h4 class="productTitle">{{ product.name }}</h4>
	<h5 class="productPrice">$ {{product.price}}</h5>
	<div>
		<b-button variant="info">
			加入購物車
		</b-button>
	</div>
</b-col>

================================◉‿◉=================================

Day12結束了!在今天我們完成了商品詳情的顯示,而明天我們將完成加入購物車、購物車商品的API,See ya next day!


上一篇
Day11:11 - 商品服務(2) - 前端 - 總商品資料顯示
下一篇
Day13:13 - 購物車服務(1) - 後端 - 購物車總商品顯示、加入購物車API
系列文
30天肝出購物網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言